import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Picker from 'react-native-picker';
import {
  pickerOptions,
  createDateData,
  regionPickerOptions,
} from 'bee/pickerOptions';
import { px2dp, noop } from 'bee/utils';
import { colors, sizes } from 'bee/themes';
import { ChooseBtn, Title } from 'bee/components/MakePlan';
import Radio from 'bee/components/Radio';
import ImagePicker from 'react-native-image-crop-picker';
import ImageModal from 'bee/components/ImageModal';
import { ChooseImage, Item, Input } from 'bee/components/CompleteInfo';
import { Languages } from 'bee/constants/Languages';
import { Names } from 'bee/components/Icon';

const idFront = require('bee/components/CompleteInfo/images/zhengmian.png');
const idBack = require('bee/components/CompleteInfo/images/beimian.png');
// @flow
type Props = {
  info: object,
  changeInfo: Function,
  jumpToNotes: Function,
};

export default class HolderInfo extends Component<Props> {
  static showDatePicker(cb = noop) {
    const date = createDateData();
    const options = pickerOptions(date, value => cb(value.join('-')));

    Picker.init(options);
    Picker.show();
  }

  constructor(props) {
    super(props);
    const {
      name,
      birth,
      sex,
      cardType,
      nation,
      idNum,
      cardValid,
      phone,
      email,
      aera,
      address,
    } = this.props.info;

    // 投保人信心
    this.state = {
      name, // 姓名
      birth, // 出生日期
      sex, // 性别
      cardType, // 证件类型
      nation, // 国籍
      idNum, // 证件号
      cardValid, // 证件有效期
      // isLongValid, // 是否长期有效
      phone, // 手机号
      email, // 邮箱
      aera, // 地区
      address, // 详细地址
      front: '',
      back: '',
      image: '',
    };

    this.showCardTypes = this.showCardTypes.bind(this);
    this.showNationsPicker = this.showNationsPicker.bind(this);
    this.showDatePicker = HolderInfo.showDatePicker.bind(this);
    this.changeField = this.changeField.bind(this);
    this.showAerasData = this.showAerasData.bind(this);
    this.selectFromAlbum = this.selectFromAlbum.bind(this);
    this.takePhoto = this.takePhoto.bind(this);
  }

  showNationsPicker() {
    // 临时国籍选择
    const data = new Array(5).fill('国籍');
    const options = pickerOptions(data, nation => {
      this.changeField({ nation: nation[0] });
    });

    Picker.init(options);
    Picker.show();
  }

  showCardTypes() {
    const data = new Array(3).fill('居民身份证');
    const options = pickerOptions(data, cardType => {
      this.changeField({ cardType: cardType[0] });
    });

    Picker.init(options);
    Picker.show();
  }

  showAerasData() {
    const options = regionPickerOptions(({ ids, aeras }) => {
      this.changeField({ aera: aeras.join(' ') });
    });
    Picker.init(options);
    Picker.show();
  }

  changeField(state) {
    this.setState(state, () => {
      this.props.changeInfo(this.state);
    });
  }

  takePhoto(state, picker) {
    ImagePicker.openCamera({
      width: 500,
      height: 500,
      includeExif: true,
    })
      .then(image => {
        this.setState({
          [state]: {
            uri: image.path,
            width: image.width,
            height: image.height,
          },
        });
        this[picker].close();
      })
      .catch(e => console.error(e));
  }

  selectFromAlbum(state, picker) {
    ImagePicker.openPicker({})
      .then(image => {
        this.setState({
          // front: {
          [state]: {
            uri: image.path,
            width: image.width,
            height: image.height,
          },
        });
        this[picker].close();
      })
      .catch(e => {
        console.error(e);
      });
  }

  render() {
    const {
      name,
      birth,
      sex,
      cardType,
      nation,
      idNum,
      // isLongValid,
      phone,
      email,
      aera,
      address,
    } = this.state;

    const { changeField } = this;

    return (
      <View style={styles.section}>
        <Title title={Languages.applicantInfo} />
        <Item title={Languages.name}>
          <Input
            value={name}
            onChangeText={text => changeField({ name: text })}
          />
        </Item>
        <Item title={Languages.birthDate}>
          <ChooseBtn
            text={birth}
            onPress={() => {
              this.showDatePicker(value => {
                changeField({ birth: value });
              });
            }}
          />
        </Item>
        <Item title={Languages.gender}>
          <View style={{ flexDirection: 'row' }}>
            <Radio selected disabled />
            <Text style={{ marginLeft: px2dp(20) }}>{sex ? '女' : '男'}</Text>
          </View>
        </Item>
        <Item title={Languages.cardType}>
          <ChooseBtn text={cardType} onPress={this.showCardTypes} />
        </Item>
        <View style={styles.pickersView}>
          <ImageModal
            ref={frontPicker => {
              this.frontPicker = frontPicker;
            }}
            selectFromAlbum={() => this.selectFromAlbum('front', 'frontPicker')}
            takePhoto={() => this.takePhoto('front', 'frontPicker')}
          >
            <ChooseImage
              title={Languages.clickToPhotoFront}
              source={this.state.front || idFront}
            />
          </ImageModal>

          <ImageModal
            ref={backPicker => {
              this.backPicker = backPicker;
            }}
            selectFromAlbum={() => this.selectFromAlbum('back', 'backPicker')}
            takePhoto={() => this.takePhoto('back', 'backPicker')}
          >
            <ChooseImage
              title={Languages.clickToPhotoBack}
              source={this.state.back || idBack}
            />
          </ImageModal>
        </View>

        <Item title={Languages.nationOrArea}>
          <ChooseBtn text={nation} onPress={this.showNationsPicker} />
        </Item>
        <Item title={Languages.idNum}>
          <Input
            value={idNum}
            onChangeText={text => {
              changeField({ idNum: text });
            }}
          />
        </Item>
        <View style={styles.cardValidView}>
          <View style={styles.longValidView}>
            <Text style={styles.validTitle}>{Languages.cardValidate}</Text>
            <View style={styles.radioView}>
              <Radio
                selected={!this.state.indate}
                onPress={value => {
                  this.setState({ isLongValid: !value });
                }}
              />

              <Text style={styles.radioText}>{Languages.longValid}</Text>
            </View>
          </View>
          <View style={styles.chooseView}>
            <ChooseBtn
              text={this.state.indate}
              iconName={Names.rili}
              iconColor={colors[1001]}
              onPress={() => {
                this.showDatePicker(value => {
                  this.setState({ indate: value });
                });
              }}
            />
          </View>
        </View>
        <Item title={Languages.phoneNum}>
          <Input
            value={phone}
            onChangeText={text => {
              changeField({ phone: text });
            }}
          />
        </Item>
        <Item title={Languages.email}>
          <Input
            value={email}
            placeholder={Languages.optionalEmail}
            onChangeText={text => {
              changeField({ email: text });
            }}
          />
        </Item>
        <Item title={Languages.aera}>
          <ChooseBtn text={aera} onPress={this.showAerasData} />
        </Item>
        <Item title={Languages.detailedAdd}>
          <Input
            value={address}
            onChangeText={text => {
              changeField({ address: text });
            }}
          />
        </Item>

        <Item title={Languages.insuredToFrom}>
          <ChooseBtn onPress={this.props.jumpToNotes} />
        </Item>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  section: {
    backgroundColor: colors.white,
    marginBottom: px2dp(20),
  },
  pickersView: {
    flexDirection: 'row',
    marginLeft: px2dp(68),
    marginRight: px2dp(68),
    justifyContent: 'space-between',
    marginBottom: px2dp(26),
    marginTop: px2dp(26),
  },
  cardValidView: {
    paddingLeft: px2dp(66),
    paddingRight: px2dp(66),
    borderColor: colors[1104],
    borderBottomWidth: StyleSheet.hairlineWidth,
    height: px2dp(120),
  },
  longValidView: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: px2dp(60),
  },
  validTitle: {
    fontSize: sizes.f2,
    color: colors[1101],
    textAlignVertical: 'center',
  },
  row: {
    flexDirection: 'row',
  },
  radioView: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  radioText: {
    marginLeft: px2dp(20),
    textAlignVertical: 'center',
  },
  chooseView: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
});
